<template>
	<view class="enterprise-msg-search">
		<titleName :name="name" :backShow="true" height="397rpx;"></titleName>
		<view class="fixed">
			<view class="bgc">
				<view class="text">1</view>
			</view>
			<view class="right">
				<view class="online">在线客服</view>
				<text>有问题，找客服</text>
				<button class="btn" @click="jumpEnterpriseDialogue">立即咨询</button>

			</view>
		</view>
		<view class="content-wrap">
			<view class="container">
				<view class="search-wrap">
					<view class="name">常见问题</view>
					<view class="ipt-wrap">
						<image :src="resourceUrl+'search-icon.png'" mode=""></image>
						<input type="text" @confirm="getList" v-model="title" placeholder="搜索关键字" />
					</view>
				</view>
				<view class="list">
					<uni-load-more iconType="circle" :status="status" v-if="dataList.length==0" />
					<view class="item" @click="jumpEnterprisemsgsearchDetail(item)" v-for="item in dataList"
						:key="item.id">
						<view class="name">{{item.title}}</view>
						<!-- <image class="top" :src="resourceUrl+'top-arrow.png'" mode=""></image> -->
						<image class="right" :src="resourceUrl+'right-arrow.png'" mode=""></image>

					</view>


				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let status = ref(true)
	let dataList = ref([])
	let title  =ref('')
	let name = "环保咨询"
	let showUploadImage = ref(false)
	let jumpEnterpriseDialogue = () => {
		uni.navigateTo({
			url: "/homePageOther/enterprisedialogue/index"
		})
	}
	let jumpEnterprisemsgsearchDetail = (item) => {
		uni.navigateTo({
			url: `/homePageOther/enterprisemsgsearchdetail/index?msg=${JSON.stringify(item)}`
		})
	}
	onLoad(() => {
		getList()
	})
	let getList = () => {
		http({
			url: '/greenArtQuestion/datalist',
			data:{
				title:title.value
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
			
			}
		})
	}
</script>

<style lang="scss" scoped>
	.enterprise-msg-search {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.ph-color) {

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 32rpx;
			color: rgb(196, 196, 196);
			line-height: 16rpx;



		}

		.content-wrap {
			height: calc(100vh - 397upx);
			background-color: #F2F2F4;
			padding-top: 138upx;
			width: 100vw;

			.container {
				height: calc(100vh - 397upx - 138upx);
				width: 100vw;
				background-color: #fff;

				.list {
					height: calc(100vh - 397upx - 138upx - 115upx);
					padding: 0 42upx 42upx 42upx;
					overflow: scroll;

					.msg {
						line-height: 47rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						padding-top: 22upx;
						padding-right: 18upx;
					}

					.item {
						padding: 42upx 0 30upx 2upx;
						display: flex;
						align-items: center;
						height: 102upx;
						border-bottom: 1rpx solid #F2F2F4;
						justify-content: space-between;



						.name {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;

						}

						.right {
							width: 15upx;
							height: 27upx;
						}

						.top {
							width: 27upx;
							height: 15upx;
						}
					}
				}

				.search-wrap {
					border-bottom: 1rpx solid #E9E9E9;

					display: flex;
					align-items: center;
					height: 115upx;
					padding: 0 25upx 0 44upx;
					justify-content: space-between;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 40rpx;
						color: #2C2C2C;

					}

					.ipt-wrap {
						width: 428rpx;
						height: 73rpx;
						background: #FFFFFF;
						border-radius: 36rpx;
						border: 1px solid #E9E9E9;
						padding-left: 31upx;
						display: flex;
						align-items: center;
						padding-left: 28upx;

						image {
							margin-right: 32upx;
							width: 32upx;
							height: 34upx;
						}

					}
				}
			}

		}

		.fixed {
			top: 170upx;
			left: 50%;
			transform: translate(-50%);
			position: fixed;
			width: 693rpx;
			height: 335rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			padding: 60upx 80upx 0 70upx;
			display: flex;
			justify-content: space-between;

			.bgc {
				background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/greenenterprise/msg-consult.png") no-repeat;
				background-size: cover;
				width: 208upx;
				height: 208upx;
				position: relative;

				.text {
					position: absolute;
					right: 10upx;
					top: 10upx;
					width: 36rpx;
					height: 36rpx;
					background: #FA5F4D;
					border-radius: 50%;
					text-align: center;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;

				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.online {
					margin-top: 5upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 41rpx;
					color: #333333;

				}

				text {
					margin-top: 10upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #949494;

				}

				.btn {
					width: 275rpx;
					height: 66rpx;
					background: #0874FA;
					border-radius: 33rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 66upx;
					text-align: center;
					margin-top: 40upx;
				}
			}
		}


	}
</style>